<template>
  <div id="Surrender">
    <h1>退保列表</h1>
    <el-table :data="allOrders" border style="width: 100%">
      <el-table-column fixed prop="_id" label="订单编号" width="150">
      </el-table-column>
      <el-table-column prop="usersId.name" label="客户姓名" width="120">
      </el-table-column>
      <el-table-column prop="orderTime" label="订单时间" width="120">
      </el-table-column>
      <el-table-column prop="insuresId.name" label="产品名称" width="120">
      </el-table-column>
      <el-table-column prop="address" label="订单状态" width="300">
        <template slot-scope="scope">
          <label>{{ ordersState(scope.row.orderState) }}</label>
        </template>
      </el-table-column>
      <el-table-column prop="zip" label="保单状态" width="120">
        <template slot-scope="scope">
          <label>{{ cancellations(scope.row.cancellation) }}</label>
        </template>
      </el-table-column>
      <el-table-column prop="insuresId.payType" label="缴费类型" width="120">
      </el-table-column>
      <el-table-column
        prop="insuresId.suitableFor"
        label="保险对象"
        width="120"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row._id)"
            type="text"
            size="small"
            >同意</el-button
          >
          <el-button
            @click="refuseClick(scope.row._id)"
            type="text"
            size="small"
            >拒绝</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("orders");

export default {
  methods: {
    ...mapActions([
      "getSurrenderOrders",
      "handelSurrenderOrders",
      "refuseSurrenderOrders",
    ]),
    handleClick(row) {
      // console.log(row);
      this.$message({
        message: "退保成功",
        type: "success",
      });
      this.handelSurrenderOrders(row);
      this.getSurrenderOrders();
    },
    refuseClick(row) {
      // console.log(row);
      this.$message.error("退保失败了哦");
      this.refuseSurrenderOrders(row);
      this.getSurrenderOrders();
    },

    ordersState(data) {
      switch (data) {
        case 1:
          return "待支付";
          break;
        case 2:
          return "已支付";
          break;
        case 3:
          return "已取消";
          break;
      }
    },
       cancellations(data) {
      switch (data) {
        case 0:
          return "正常";
          break;
        case 1:
          return "等待管理员审核退保中";
          break;
        case 2:
          return "退保成功";
          break;
        case 3:
          return "退保失败";
          break;
        case 4:
          return "客户申请退保中";
          break;
      }
    },
  },
  computed: {
    ...mapState(["allOrders"]),
  },

  created() {
    this.getSurrenderOrders();
  },
  data() {
    return {
      
    };
  },
};
</script>